<template>
	<div class="config-login-container">
		<el-card shadow="hover" class="mb15" header="登录服务设置">
			<el-form ref="configLoginFormRef" :model="formData" label-width="120px">
				<el-row>
					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-form-item label="账号密码登录">
							<el-switch v-model="formData.login.account.enable" :disabled="readonly" active-text="开" inactive-text="关" active-value="Y" inactive-value="N"/>
							<span class="ml20 color-warning"><el-icon class="mr5"><el-icon-warning /></el-icon>建议默认开启</span>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-form-item label="短信验证码登录">
							<el-switch v-model="formData.login.mobile.enable" :disabled="readonly" active-text="开" inactive-text="关" active-value="Y" inactive-value="N"/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-form-item label="邮箱验证码登录">
							<el-switch v-model="formData.login.email.enable" :disabled="readonly" active-text="开" inactive-text="关" active-value="Y" inactive-value="N"/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-form-item label="扫码登录">
							<el-switch v-model="formData.login.scan.enable" :disabled="readonly" active-text="开" inactive-text="关" active-value="Y" inactive-value="N"/>
						</el-form-item>
					</el-col>
					<el-divider class="mt1"></el-divider>
				</el-row>
				<el-row v-if="formData.login.account.enable == 'Y'">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="验证码类型" prop="login.account.codeType" :rules="[{ required: true, message: `验证码类型不能为空`, trigger: 'change' }]">
							<el-radio-group v-model="formData.login.account.codeType" :disabled="readonly">
								<el-radio label="PICTURE">图片验证码</el-radio>
								<el-radio label="DYNAMIC">动态验证码</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-divider class="mt1"></el-divider>
				</el-row>
				<el-row v-if="formData.login.mobile.enable == 'Y' || (formData.login.account.enable == 'Y' && formData.login.account.codeType == 'DYNAMIC')">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="验证码长度">
							<el-input-number v-model="formData.login.mobile.length" :disabled="readonly" :min="4" :max="12"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="验证码有效时长">
							<el-input-number v-model="formData.login.mobile.expireTime" :disabled="readonly" :min="1" :max="60"></el-input-number>
							<span class="ml10 color-info">分钟</span>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="短信模板标识">
							<el-input v-model="formData.login.mobile.templateId" :disabled="readonly"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="短信模板参数">
							<el-input v-model="formData.login.mobile.templateParam" :readonly="readonly" type="textarea" placeholder="请输入短信模板参数" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="短信发送主题" prop="login.mobile.subject" :rules="[{ required: true, message: `短信发送主题不能为空`, trigger: 'blur' }]">
							<el-input v-model="formData.login.mobile.subject" :readonly="readonly" placeholder="请输入短信发送主题" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="短信发送模板" prop="login.mobile.template" :rules="[{ required: true, message: `短信发送模板不能为空`, trigger: 'blur' }]">
							<el-input v-model="formData.login.mobile.template" :readonly="readonly" type="textarea" placeholder="请输入短信发送模板" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-divider class="mt1"></el-divider>
				</el-row>
				<el-row v-if="formData.login.email.enable == 'Y' || (formData.login.account.enable == 'Y' && formData.login.account.codeType == 'DYNAMIC')">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="验证码长度">
							<el-input-number v-model="formData.login.email.length" :disabled="readonly" :min="4" :max="12"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="验证码有效时长">
							<el-input-number v-model="formData.login.email.expireTime" :disabled="readonly" :min="1" :max="60"></el-input-number>
							<span class="ml10 color-info">分钟</span>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="邮件发送主题" prop="login.email.subject" :rules="[{ required: true, message: `邮件发送主题不能为空`, trigger: 'blur' }]">
							<el-input v-model="formData.login.email.subject" :readonly="readonly" placeholder="请输入邮件发送主题" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="邮件发送模板" prop="login.email.template" :rules="[{ required: true, message: `邮件发送模板不能为空`, trigger: 'blur' }]">
							<el-input v-model="formData.login.email.template" :readonly="readonly" type="textarea" placeholder="请输入邮件发送模板" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-divider class="mt1"></el-divider>
				</el-row>
				<el-row v-if="formData.login.scan.enable == 'Y'">
					<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
						<el-form-item label="扫码类型" prop="login.scan.scanType" :rules="[{ required: true, message: `扫码类型不能为空`, trigger: 'change' }]">
							<el-checkbox-group v-model="formData.login.scan.scanModes" :disabled="readonly">
								<el-checkbox label="QQ">QQ</el-checkbox>
								<el-checkbox label="WEIXIN">微信</el-checkbox>
								<el-checkbox label="QIYE_WEIXIN">企业微信</el-checkbox>
								<el-checkbox label="FEISHU">飞书</el-checkbox>
								<el-checkbox label="DINGDING">钉钉</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mt10">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" align="center">
						<el-button v-if="readonly" v-auth="'system:config:edit'" type="primary" @click="onCheck">设 置</el-button>
						<el-button v-else type="primary" @click="onConfigLoginFormSubmit">保 存</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-dialog title="密码验证" v-model="isShowDialog" width="30%">
			<el-form ref="pwdverifyFormRef" :model="verifyFormData" :rules="verifyFormRules" label-width="80px">
				<el-row :gutter="35">
					<el-col class="mb20">
						<span class="color-warning ml10">修改登录服务设置属于危险操作，请确认是否必要修改，如是请继续操作。</span>
					</el-col>
					<el-col>
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="verifyFormData.password" placeholder="请输入当前登录用户密码" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onVerifyCancel">取 消</el-button>
					<el-button type="primary" @click="onVerifySubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Local } from '/@/utils/storage';
import { SM } from '/@/utils/sm';
import { verifyPassword } from '/@/utils/toolsValidate';
import { pwdVerify } from '/@/api/login/index';
import { getConfig, editConfig } from '/@/api/config/index';
export default {
	name: 'config/login',
	components: {},
	setup() {
		const configLoginFormRef = ref();
		const pwdverifyFormRef =ref();
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		const state = reactive({
			verifyToken: '',
			formData: {
				login: {
					account: {
						enable: 'Y',
						codeType: 'PICTURE',
					},
					mobile: {
						enable: 'N',
						length: 6,
						expireTime: 5,//单位分钟
						templateId: '',
						templateParam: '',
						subject: '登录验证码',
						template: '【XXXX】尊敬的用户您好！您的验证码是：${code}，5分钟内有效，请勿泄露给他人，如非本人操作，请忽略此消息。',
					},
					email: {
						enable: 'N',
						length: 6,
						expireTime: 5,//单位分钟
						subject: '登录验证码',
						template: '【XXXX】尊敬的用户您好！您的验证码是：${code}，5分钟内有效，请勿泄露给他人，如非本人操作，请忽略此消息。',
					},
					scan: {
						enable: 'N',
						scanType: 'QQ',
						scanModes: ['QQ']
					},
				}
			},
			formRules: {
				
			},
			isShowDialog: false,
			readonly: true,
			verifyFormData: {
				password: ''
			},
			verifyFormRules : {
				password: { required: true, validator: validPassword, trigger: 'blur' },
			}
		});
		
		const loadConfig = () => {
			getConfig().then(res => setConfigLoginForm(res));
		}
		
		const onConfigLoginFormSubmit = () => {
			configLoginFormRef.value.validate(valid => {
				if(valid){
					if(state.formData.login.account.enable == 'N' && state.formData.login.mobile.enable == 'N' 
							&& state.formData.login.email.enable == 'N' && state.formData.login.scan.enable == 'N'){
						ElMessage.warning('至少选择一种登录方式');
						return;
					}
					//Arrays to string
					state.formData.login.scan.scanType = state.formData.login.scan.scanModes.join(',');
					
					editConfig(state.verifyToken, {login: state.formData.login}).then((res: any) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							state.readonly = true;
							setConfigLoginForm(res);
						}
					});
				}
			})
		}
		//设置登录配置表单
		const setConfigLoginForm = (res: any) => {
			if(res.code == 0){
				if(res.data.login.account){
					state.formData.login.account = res.data.login.account;
				}
				if(res.data.login.mobile){
					state.formData.login.mobile = res.data.login.mobile;
				}
				if(res.data.login.email){
					state.formData.login.email = res.data.login.email;
				}
				if(res.data.login.scan){
					state.formData.login.scan = res.data.login.scan;
					state.formData.login.scan.scanModes = res.data.login.scan?.scanType?.split(',') || [];
				}
			}
		}
		//打开编辑前校验
		const onCheck = () => {
			state.isShowDialog = true;
		}
		const onVerifyCancel = () => {
			state.isShowDialog = false;
		}
		const onVerifySubmit = () => {
			pwdverifyFormRef.value.validate(valid => {
				if(valid){
					const publickey = Local.get('publicKey');
					let password = SM.sm2Encrypt(state.verifyFormData.password, publickey);
					pwdVerify({password : password}).then((res: any) => {
						if(res.code === 0){
							ElMessage.success('密码验证通过');
							state.verifyFormData.password = '';
							state.verifyToken = res.data;
							state.readonly = false;
							state.isShowDialog = false;
						}else{
							ElMessage.error('密码验证不通过');
						}
					});
				}
			});
		};
		// 页面加载时
		onMounted(() => {
			loadConfig();
		});
		return {
			configLoginFormRef,
			onConfigLoginFormSubmit,
			pwdverifyFormRef,
			onCheck,
			onVerifyCancel,
			onVerifySubmit,
			...toRefs(state),
		};
	},
}
</script>